<template>
    <view class="card-now cards">
        <view class="card-title">
            <view class="card-title-name">{{ userInfo.AdminName }}</view>
            <view class="card-title-extra">
                <view class="text">
                    {{ dayjs(weatherNow.obsTime).format('YYYY-MM-DD HH:mm') }}
                </view>
            </view>
        </view>
        <view class="card-content">
            <view class="icon">
                <i :class="'qi-' + weatherNow.icon"></i>
            </view>
            <view class="text">
                <view class="temp">{{ weatherNow.temp }}°</view>
                <view class="wtext">{{ weatherNow.text }}</view>
            </view>
        </view>
        <view class="card-footer">
            <view>
                <view class="value tac">{{ weatherNow.windScale }}级</view>
                <view class="desc">{{ weatherNow.windDir }}</view>
            </view>
            <view>
                <view class="value tac">{{ weatherNow.humidity }}%</view>
                <view class="desc">相对湿度</view>
            </view>
            <view>
                <view class="value tac">{{ weatherNow.feelsLike }}°</view>
                <view class="desc">体感温度</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { useUserStore } from '@/stores'
import { GetWeatherNow_API } from '@/server/home'
import 'qweather-icons/font/qweather-icons.css'

const sotre = useUserStore()
const { userInfo } = storeToRefs(sotre)

const weatherNow = ref<any>({})

const getWeatherNow = async () => {
    const res = await GetWeatherNow_API()
    if (res.IsSuccess) {
        weatherNow.value = res.Data.now
    }
}
onLoad(() => {
    getWeatherNow()
})
</script>

<style lang="scss" scoped>
.card-now {
    background-image: -webkit-linear-gradient(
        225deg,
        #fee5ca,
        #e9f0ff 55%,
        #dce3fb
    );
    background-image: -o-linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
    background-image: -moz-linear-gradient(
        225deg,
        #fee5ca,
        #e9f0ff 55%,
        #dce3fb
    );
    background-image: linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);

    .card-title {
        display: flex;
        align-items: baseline;

        .card-title-name {
            flex: 1;
            color: #000000;
            font-size: 32rpx;
            font-weight: normal;
        }

        .card-title-extra {
            flex: 2;
            display: flex;
            color: royalblue;
            align-items: center;
            justify-content: right;

            .text {
                font-size: 31rpx;
                color: #948b8b;
            }
        }
    }

    .card-content {
        display: flex;
        justify-content: center;

        .icon {
            // 天气图标
            font-size: 140rpx;
            color: #ffb60c;
            padding-right: 30rpx;
        }

        .text {
            align-items: center;
            display: flex;
            flex-flow: column;
            justify-content: center;

            .temp {
                font-size: 80rpx;
                line-height: 80rpx;
            }

            .wtext {
            }
        }
    }

    .card-footer {
        font-size: 24rpx;
        color: #948b8b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(0, 0, 0, 0.03);
        border-radius: 24rpx;
        padding: 0 42rpx;

        .value {
            font-size: 32rpx;
            color: #000000;
        }

        .desc {
            font-size: 30rpx;
            // color: rgba(0, 0, 0, 0.5);
        }
    }
}
</style>
